<template>
  <a-menu
    mode="inline"
    theme="dark"
    :inline-collapsed="menuCollapsed"
    :default-selected-keys="['102']"
    :default-open-keys="['100']"
    @click="clickMenu"
  >
    <template v-for="menuFather in menus">
      <a-sub-menu :key="menuFather.menuId">
        <span slot="title">
          <a-icon :type="menuFather.menuIcon" /><span>
            {{ menuFather.menuName}}</span></span
        >
        <a-menu-item
          :key="menuItem.menuId"
          v-for="menuItem in menuFather.menuChildren"
        >
          <router-link :to="menuItem.menuPath">{{
            menuItem.menuName
          }}</router-link>
        </a-menu-item>
      </a-sub-menu>
    </template>
  </a-menu>
</template>

<script>
export default {
  name: "LeftMenu",
  props: ["menuCollapsed"],
  data() {
    return {
      selectKeys: ["102"],
      openKeys: ["100"],
      isLadingMenu: true,
      menus: [
        {
          menuChildren: "",
          menuDescribe: "",
          menuIcon: "loading",
          menuName: "加载中....",
        },
      ],
    };
  },
  created() {},
  mounted() {
    this.getMenu();
  },
  methods: {
    getMenu() {
      const token = localStorage.getItem("Access-Token");
      const user = token.split(".")[1];
      const Base64 = require("js-base64").Base64;
      const userRole = Base64.decode(user);
      const userId = JSON.parse(userRole).adminId;
      this.$axios({
        method: "get",
        url: "/menu/getMenu?adminId=" + userId,
      }).then((res) => {
        this.menus = res.data.data;
      });
    },
    clickMenu({ item, key, keyPath }) {
      this.selectKeys[0] = keyPath[0];
      this.openKeys[0] = keyPath[1];
    },
  },
};
</script>

<style scoped>
</style>
